* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 外部box */
.print-box {
  height: calc(100dvh - 180px); /* 100%视口高度 */
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #101010;
  /* 背景grid网格 */
  background:
    fixed linear-gradient(transparent, #fff),
    fixed
      repeating-linear-gradient(
        #efefef,
        #efefef 1px,
        transparent 1px,
        transparent 5mm
      ),
    fixed
      repeating-linear-gradient(
        to right,
        #efefef,
        #efefef 1px,
        transparent 1px,
        transparent 5mm
      )
      #fff;
}

.print-header {
  height: 40px;
  background-color: antiquewhite;
}

.print-content {
  height: calc(100% - 40px);
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows: 40px 1fr;
  grid-template-areas:
    'print-rule-h print-rule-h'
    'print-rule-v print-design';
  overflow: hidden;
}

.print-rule-h {
  grid-area: print-rule-h;
  background-color: beige;
  display: flex;
  position: relative;
}

/* 刻度线部分 */
.h-ruler {
  --major-interval: 10mm; /* 主刻度间隔（与数字标签匹配） */
  --minor-interval: 2mm; /* 次刻度间隔 */
  width: 100%;

  height: 38px;
  background: 
    /* 主刻度线（高度20px） */
    linear-gradient(90deg, #000 1px, transparent 1px) 0 20px /
      var(--major-interval) 40px,
    /* 次刻度线（高度10px） */ linear-gradient(90deg, #999 1px, transparent 1px)
      0 30px / var(--minor-interval) 40px;
  background-repeat: repeat-x;
  position: relative;
  left: 2mm;
}

/* 数字标签容器 */
.h-ruler-labels {
  position: absolute;
  left: 82mm;
  width: 100%;
}

/* 单个数字标签 */
.h-ruler-labels span {
  position: absolute;
  transform: translateX(-50%); /* 居中对齐刻度线 */
  font-size: 12px;
  color: #666;
  /* 不可选择*/
  user-select: none;
}

/* 垂直尺子 */
.print-rule-v {
  grid-area: print-rule-v;
  background-color: beige;
  width: 50px;
  position: relative;
}

/* 纵向刻度线部分 */
.v-ruler {
  --major-interval: 10mm; /* 主刻度间隔（与数字标签匹配） */
  --minor-interval: 2mm; /* 次刻度间隔 */
  height: 100%;
  width: 40px;

  background: 
    /* 主刻度线（宽度20px） */
    linear-gradient(0deg, #000 1px, transparent 1px) 20px 0 / 40px
      var(--major-interval),
    /* 次刻度线（宽度10px） */ linear-gradient(0deg, #999 1px, transparent 1px)
      30px 0 / 40px var(--minor-interval);
  background-repeat: repeat-y;
  position: relative;
  left: 10px;
}

/* 纵向数字标签容器 */
.v-ruler-labels {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40px;
}

/* 单个纵向数字标签 */
.v-ruler-labels span {
  position: absolute;
  transform: translateY(-50%); /* 居中对齐刻度线 */
  font-size: 12px;
  color: #666;
  writing-mode: vertical-rl; /* 垂直书写模式 */
  text-align: center;
  user-select: none; /* 不可选择 */
}

.print-design {
  grid-area: print-design;
  /* background-color: burlywood; */
}
